<!DOCTYPE html>
<html>
<head>
    <title>Canvas Rectangle Translation</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000000;"></canvas>
    <button id="moveButton">Move Rectangle</button>

    <script>
      /**
       * 变换
       * ctx.translate(x, y): 重新映射画布上的 (0, 0) 位置
       * ctx.rotate(angle): 旋转当前绘图
       * ctx.scale(x, y): 缩放当前绘图至更大或更小
       * 
       * ctx.save: 保存当前环境的状态，可以把当前状态进行保存到缓存中
       * ctx.restore: 返回之前保存过的路径状态和属性
       * 作用： 保存和恢复绘图状态
       * 使用场景：当你在绘制一个图形的时候，你可能需要改变一些属性，比如颜色，线宽等，当你绘制完这个图形之后，你可能需要恢复到绘制之前的状态，这时候就可以使用save和restore方法
       * 
       * 注意：变换只对接下来的绘制有效，如果你在变换之后绘制了一个图形，然后又变换了，那么第一个图形不会被变换，第二个图形会被变换两次
      */
        // 获取Canvas和按钮元素
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var moveButton = document.getElementById('moveButton');
        var rectX = 50; // 矩形的初始x坐标
        var rectY = 50; // 矩形的初始y坐标
        var rectWidth = 100; // 矩形的宽度
        var rectHeight = 50; // 矩形的高度

        // 绘制矩形的函数
        function drawRectangle(x, y) {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
            ctx.fillRect(x, y, rectWidth, rectHeight); // 绘制矩形
        }

        // 初始绘制矩形
        drawRectangle(rectX, rectY);

        // 为按钮添加点击事件监听器
        moveButton.addEventListener('click', function() {
            // 更新矩形的位置并重新绘制
            rectX += 20; // 向右平移20像素
            rectY += 20; // 向下平移20像素
            drawRectangle(rectX, rectY);
        });
    </script>
</body>
</html>